<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">编辑资料</block>
		</cu-custom>
		<uni-section title="上传职工相关材料" type="line">
			<form>
				<view class="cu-form-group">
					<view class="title">姓名</view>
					<input placeholder="请输入姓名" name="input" v-model="myFormData.name" disabled></input>
				</view>
				<view class="cu-form-group">
					<view class="title">身份证正面（人像）
						<text class="text-sm text-gray">(
							<template v-if="myFormData.idcardFront===null">
								<text class="cuIcon-close text-red"></text>未上传
							</template>
							<template v-else>
								<text class="cuIcon-check text-green"></text>已上传
							</template>)
						</text>
					</view>
					<button class='cu-btn bg-blue shadow' @tap="ChooseImage('idcardFront')"><text
							class="cuIcon-add text-lg"></text></button>
				</view>
				<view class="cu-form-group">
					<view class="title">身份证背面（国徽）
						<text class="text-sm text-gray">(
							<template v-if="myFormData.idcardBack===null">
								<text class="cuIcon-close text-red"></text>未上传
							</template>
							<template v-else>
								<text class="cuIcon-check text-green"></text>已上传
							</template>)
						</text>
					</view>
					<button class='cu-btn bg-blue shadow' @tap="ChooseImage('idcardBack')"><text
							class="cuIcon-add text-lg"></text></button>
				</view>
				<view class="cu-form-group">
					<view class="title">户口本
						<text class="text-sm text-gray">(
							<template v-if="myFormData.houseBook===null">
								<text class="cuIcon-close text-red"></text>未上传
							</template>
							<template v-else>
								<text class="cuIcon-check text-green"></text>已上传
							</template>)
						</text>
					</view>
					<button class='cu-btn bg-blue shadow' @tap="ChooseImage('houseBook')"><text
							class="cuIcon-add text-lg"></text></button>
				</view>
				<view class="cu-form-group">
					<view class="title">人事通知复印件
						<text class="text-sm text-gray">(
							<template v-if="myFormData.notificationBook===null">
								<text class="cuIcon-close text-red"></text>未上传
							</template>
							<template v-else>
								<text class="cuIcon-check text-green"></text>已上传
							</template>)
						</text>
					</view>
					<button class='cu-btn bg-blue shadow' @tap="ChooseImage('notificationBook')"><text
							class="cuIcon-add text-lg"></text></button>
				</view>
				<view class="cu-form-group">
					<view class="title">不动产查册证明
						<text class="text-sm text-gray">(
							<template v-if="myFormData.estateBook===null">
								<text class="cuIcon-close text-red"></text>未上传
							</template>
							<template v-else>
								<text class="cuIcon-check text-green"></text>已上传
							</template>)
						</text>
					</view>
					<button class='cu-btn bg-blue shadow' @tap="ChooseImage('estateBook')"><text
							class="cuIcon-add text-lg"></text></button>
				</view>
				<view class="cu-form-group">
					<view class="title">住房证明
						<text class="text-sm text-gray">(
							<template v-if="myFormData.residenceBook===null">
								<text class="cuIcon-close text-red"></text>未上传
							</template>
							<template v-else>
								<text class="cuIcon-check text-green"></text>已上传
							</template>)
						</text>
					</view>
					<button class='cu-btn bg-blue shadow' @tap="ChooseImage('residenceBook')"><text
							class="cuIcon-add text-lg"></text></button>
				</view>
			</form>
		</uni-section>
		<uni-section title="修改婚姻状况" type="line">
			<form>
				<view class="cu-form-group">
					<view class="title">婚姻状况</view>
					<view>
						<radio-group class="block" @change="RadioChange">
							<radio class='blue' :class="myFormData.ismarried==0?'checked':''"
								:checked="myFormData.ismarried==0?true:false" value="0"></radio>未婚
							<radio class='green margin-left-sm' :class="myFormData.ismarried==1?'checked':''"
								:checked="myFormData.ismarried==1?true:false" value="1"></radio>已婚
						</radio-group>
					</view>
				</view>
				<template v-if="myFormData.ismarried==1">
					<view class="cu-form-group">
						<view class="title">上传结婚证
							<text class="text-sm text-gray">(
								<template v-if="myFormData.marriageBook===null">
									<text class="cuIcon-close text-red"></text>未上传
								</template>
								<template v-else>
									<text class="cuIcon-check text-green"></text>已上传
								</template>)
							</text>
						</view>
						<button class='cu-btn bg-blue shadow' @tap="ChooseImage('marriageBook')"><text
								class="cuIcon-add text-lg"></text></button>
					</view>
					<view class="cu-form-group">
						<view class="title">配偶姓名</view>
						<input placeholder="请输入配偶姓名" name="input" v-model="myFormData.sname"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">配偶身份证</view>
						<input placeholder="请输入配偶身份证" name="input" v-model="myFormData.sidcard"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">配偶户口所在地</view>
						<input placeholder="请输入配偶户口所在地" name="input" v-model="myFormData.shousehold"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">配偶户口工作单位</view>
						<input placeholder="请输入配偶户口工作单位" name="input" v-model="myFormData.sworkCompany"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">上传配偶身份证
							<text class="text-sm text-gray">(
								<template v-if="myFormData.sidcardImg===null">
									<text class="cuIcon-close text-red"></text>未上传
								</template>
								<template v-else>
									<text class="cuIcon-check text-green"></text>已上传
								</template>)
							</text>
						</view>
						<button class='cu-btn bg-blue shadow' @tap="ChooseImage('sidcardImg')"><text
								class="cuIcon-add text-lg"></text></button>
					</view>
					<!-- <view class="cu-form-group">
						<view class="title">上传配偶户口本
							<text class="text-sm text-gray">(
								<template v-if="myFormData.marriageBook===null">
									<text class="cuIcon-close text-red"></text>未上传
								</template>
								<template v-else>
									<text class="cuIcon-check text-green"></text>已上传
								</template>)
							</text>
						</view>
						<button class='cu-btn bg-blue shadow' @tap="ChooseImage(idcardBack)"><text class="cuIcon-add text-lg"></text></button>
					</view> -->
				</template>
			</form>
		</uni-section>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-blue lg" @click="onSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
				switchC: true,
				imgList: '',
				myFormData: {},
				uploadUrl: "/sys/common/upload",
				employeeUrl: '/base/znzfEmployee/queryByUid',

			};
		},
		onLoad: function(option) {
			this.loadInfo()
		},
		methods: {
			loadInfo() {
				this.$http.get(this.employeeUrl, {
					params: {
						uid: this.$store.getters.userid
					}
				}).then(res => {
					console.log('employeeUrl：', res)
					if (res.data.success) {
						this.myFormData = res.data.result
					}
				}).catch(e => {
					console.log("请求错误", e)
				})
			},
			onSubmit() {
				Object.keys(this.myFormData).map(key=>{
				  if(this.myFormData[key]==''){
					this.myFormData[key] = null
				  }
				})
				console.log(this.myFormData)
				this.$tip.loading();
				this.$http.put('/base/znzfEmployee/edit', this.myFormData).then(res => {
					console.log(res)
					this.$tip.loaded();
					if (res.data.success) {
						this.$tip.toast('提交成功')
						this.$Router.replace({
							name: 'employeeDetail'
						})
					}
				}).catch(() => {
					this.$tip.loaded();
					this.$tip.error('提交失败')
				});
			},
			RadioChange(e) {
				this.myFormData.ismarried = e.detail.value
			},
			ChooseImage(name) {
				var that = this;
				that.myFormData[name] = null
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						res.tempFilePaths.forEach(item => {
							that.$http.upload(that.$config.apiUrl + that.uploadUrl, {
									filePath: item,
									name: 'file'
								})
								.then(res => {
									console.log(res)
									if (res.data.success) {
										if (that.myFormData[name]!= null) {
											that.myFormData[name] = that.myFormData[name].concat(
												',' + res.data.message)
										} else {
											that.myFormData[name] = res.data.message
										}
									}
								})
						})
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				console.log(e.currentTarget.dataset.index)
				uni.showModal({
					title: '召唤师',
					content: '确定要删除这段回忆吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			}
		}
	}
</script>

<style lang='scss'>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
